.badge {
    display: inline-block;

    padding: $f-badge-padding-y $f-badge-padding-x;
    font-size: $f-badge-font-size;
    font-weight: $f-badge-font-weight;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    @include f-custom-border-radius($f-badge-border-radius);

    &:empty {
        display: none;
    }
}

.btn .badge {
    position: relative;
    top: -1px;
}

// 带圆角，反白
.badge-pill {
    padding-right: $f-badge-pill-padding-x;
    padding-left: $f-badge-pill-padding-x;
    @include f-custom-border-radius($f-badge-pill-border-radius);
}

$f-badge-arrow-size: 8px;

@mixin f-badge-arrow($f-direction: 'left') {
    position: relative;
    color: #fff;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: - $f-badge-arrow-size;
        border-top: $f-badge-arrow-size solid transparent;
        border-bottom: $f-badge-arrow-size solid transparent;
    }

    @if ($f-direction=='right') {
        margin-right: $f-badge-arrow-size;

        &::before {
            border-left: $f-badge-arrow-size solid transparent;
            border-right: 0 solid transparent;
            right: - $f-badge-arrow-size;
        }
    }

    @else {
        margin-left: $f-badge-arrow-size;

        &::before {
            border-right: $f-badge-arrow-size solid transparent;
            border-left: 0 solid transparent;
            left: - $f-badge-arrow-size;
        }
    }
}

// 箭头的宽度
$f-badge-border-arrow-width: 12px;
// 箭头内遮挡的宽度
$f-badge-border-arrow-inner-width: 10px;

@mixin f-badge-border-arrow($f-direction: 'left') {
    position: relative;

    &::before,
    &::after {
        width: 0;
        height: 0px;
        content: "";
        position: absolute;
        top: 50%;
        border: solid transparent;
    }

    &::before {
        left: -$f-badge-border-arrow-width;
        z-index: 2;
        border-top-width: $f-badge-border-arrow-width * 0.5;
        border-bottom-width: $f-badge-border-arrow-width * 0.5;
        margin-top: -$f-badge-border-arrow-width*0.5;
    }

    &::after {
        z-index: 3;
        left: -$f-badge-border-arrow-inner-width;
        border-top-width: $f-badge-border-arrow-inner-width * 0.5;
        border-bottom-width: $f-badge-border-arrow-inner-width * 0.5;
        margin-top: -$f-badge-border-arrow-inner-width*0.5;
    }

    @if ($f-direction=='right') {
        margin-right: $f-badge-border-arrow-width;

        &::before {
            border-right-width: 0px;
            border-left-width: $f-badge-border-arrow-width;
        }

        &::after {
            border-right-width: 0px;
            border-left-width: $f-badge-border-arrow-inner-width;
        }
    }

    @else {
        margin-left: $f-badge-border-arrow-width;

        &::before {
            border-left-width: 0px;
            border-right-width: $f-badge-border-arrow-width;
        }

        &::after {
            border-left-width: 0px;
            border-right-width: $f-badge-border-arrow-inner-width;
        }
    }
}

$f-bage-semantic-colors: (
    "success":(text:$f-semantic-success-01,
        border: $f-semantic-success-02,
        bg: $f-semantic-success-03),
    "info":(text:$f-semantic-info-01,
        border: $f-semantic-info-02,
        bg: $f-semantic-info-03),
    "warning": (text:$f-semantic-warning-01,
        border: $f-semantic-warning-02,
        bg: $f-semantic-warning-03),
    "danger": (text:$f-semantic-danger-01,
        border: $f-semantic-danger-02,
        bg: $f-semantic-danger-03),
    "primary": (text:$f-theme-03,
        border: $f-theme-05,
        bg: $f-semantic-info-03),
    "continue": (text:$f-semantic-submit-01,
        border:$f-semantic-submit-02,
        bg:$f-semantic-submit-03)
);

@each $f-type,
$f-type-value in $f-bage-semantic-colors {

    // 反白徽标
    .badge-#{$f-type} {
        color: #fff;
        background: map-get($f-type-value, 'text');
    }

    // 反白，圆角药片
    .badge-pill-#{$f-type} {
        padding-right: $f-badge-pill-padding-x;
        padding-left: $f-badge-pill-padding-x;
        @include f-custom-border-radius($f-badge-pill-border-radius);
        color: #fff;
        background: map-get($f-type-value, 'text');
    }

    // 带边线、圆角的药片，颜色对比强
    .badge-pill-border-#{$f-type} {
        padding-right: $f-badge-pill-padding-x;
        padding-left: $f-badge-pill-padding-x;
        @include f-custom-border-radius($f-badge-pill-border-radius);
        color: map-get($f-type-value, 'text');
        border: 1px solid map-get($f-type-value, 'text');
        background: map-get($f-type-value, 'bg');
    }

    //带边线、小圆角，颜色对比弱
    .badge-border-#{$f-type} {
        padding: ($f-badge-padding-y - 0.0625rem) ($f-badge-padding-x - 0.0625rem);
        color: map-get($f-type-value, 'text');
        border: 1px solid map-get($f-type-value, 'border');
        background: map-get($f-type-value, 'bg');
        border-radius: 2px;
    }

    // 带边线箭头——超左
    .badge-border-arrow-left-#{$f-type} {
        color: map-get($f-type-value, 'text');
        border: 1px solid map-get($f-type-value, 'border');
        background: map-get($f-type-value, 'bg');
        @include f-badge-border-arrow();

        &::before {
            border-right-color: map-get($f-type-value, 'border');
        }

        &::after {
            border-right-color: map-get($f-type-value, 'bg');
        }
    }

    // 带边线箭头——超右
    .badge-border-arrow-right-#{$f-type} {
        @include f-badge-border-arrow('right');

        &::before {
            border-right-color: map-get($f-type-value, 'border');
        }

        &::after {
            border-right-color: map-get($f-type-value, 'bg');
        }
    }

    // 带实心箭头——超左、朝右
    .f-badge-arrow-left-#{$f-type} {
        background: map-get($f-type-value, 'text');
        @include f-badge-arrow();

        &::before {
            border-right-color: map-get($f-type-value, 'text');
        }
    }

    .f-badge-arrow-right-#{$f-type} {
        background: map-get($f-type-value, 'text');
        @include f-badge-arrow('right');

        &::before {
            border-left-color: map-get($f-type-value, 'text');
        }
    }

    // 圆点
    .badge-round-#{$f-type} {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        display: inline-block !important;
        line-height: 1;
        overflow: hidden;
        padding: 0;
        background: map-get($f-type-value, 'text');
    }

    // 圆点带浅色外圈
    .badge-round-outer-#{$f-type} {
        position: relative;
        width: 14px;
        height: 14px;
        display: block;
        background: rgba(map-get($f-type-value, 'text'), 0.18);
        border-radius: 7px;

        &::after {
            content: '';
            width: 8px;
            height: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -4px 0 0 -4px;
            border-radius: 4px;
            background: map-get($f-type-value, 'text');
        }
    }
}